<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棒棒糖滑块</title>
    <style>
 * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --hue: 223;
            --red: hsl(71, 84%, 49%);
            --white: hsl(195, 91%, 40%);
            --blue: hsl(341, 56%, 58%);
            font-size: calc(24px + (64 - 24) * (100vw - 320px) / (1280 - 320));
        }

        body {
            background-color: var(--blue); /* 背景色 */
            color: var(--white);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        /* Main styles */
        .candy {
            --gradient1: linear-gradient(hsla(0, 0%, 100%, 0) 0.1em, hsla(0, 0%, 100%, 0.3) 0.2em 0.25em, hsla(0, 0%, 100%, 0) 0.35em 0.5em, hsla(0, 0%, 100%, 0.2) 0.55em 0.6em, hsla(0, 0%, 100%, 0) 0.65em);
            --gradient2: repeating-linear-gradient(135deg, var(--red) 0 0.48em, var(--white) 0.5em 0.98em, var(--red) 1em 1.08em, var(--white) 1.1em 1.18em, var(--red) 1.2em 1.28em, var(--white) 1.3em 1.38em, var(--red) 1.4em 1.48em, var(--white) 1.5em 1.98em, var(--red) 2em);
            --percent: 50%;
            display: flex;
            align-items: center;
            position: relative;
            margin: 0.5em 0;
            width: 10em;
            height: 1.5em;
        }

        .candy__input {
            background-color: hsl(0, 0%, 0%, 0); /* 默认透明背景 */
            border-radius: 0.375em;
            width: inherit;
            height: 0.75em;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
            z-index: 3;
            cursor: pointer;
        }

        .candy__input:focus {
            outline: transparent;
        }

        /* WebKit handle */
        .candy__input::-webkit-slider-thumb {
            background-color: hsla(0, 0%, 0%, 0);
            border: 0;
            border-radius: 50%;
            width: 1.5em;
            height: 1.5em;
            -webkit-appearance: none;
            appearance: none;
        }

        /* Firefox handle */
        .candy__input::-moz-range-thumb {
            background-color: hsla(0, 0%, 0%, 0);
            border: 0;
            border-radius: 50%;
            width: 1.5em;
            height: 1.5em;
        }

        /* Main styles continued */
        .candy:before {
            background: var(--gradient1), hsla(0, 0%, 100%, 0.06);
            box-shadow: 0 0.05em 0.05em hsla(0, 0%, 0%, 0.3) inset, 0 -0.05em 0.05em hsla(0, 0%, 0%, 0.3) inset, 0 0 0.25em hsla(0, 0%, 0%, 0.4) inset, 0 0.25em 0.15em hsla(0, 0%, 0%, 0.2);
            z-index: 1;
        }

        .candy:before,
        .candy__input-fill,
        .candy__input-fill:before,
        .candy__input-handle-bg,
        .candy__input-handle-bg:before,
        .candy__input-handle-circle,
        .candy__input-handle-shadow {
            display: block;
            pointer-events: none;
            position: absolute;
            left: 0;
        }

        .candy:before,
        .candy__input-fill:before,
        .candy__input-handle-bg:before {
            content: "";
        }

        .candy:before,
        .candy__input-fill {
            border-radius: 0.375em;
            top: 0.375em;
            width: 100%;
            height: 0.75em;
        }

        .candy__input-fill {
            background-color: hsl(0, 0%, 100%, 0.2); /* 拉动时的背景色 */
            overflow: hidden;
        }

        .candy__input-fill:before {
            background: var(--gradient2);
            width: 100%;
            height: 100%;
            transform: translateX(calc(-100% + var(--percent)));
        }

        .candy__input-handle-bg,
        .candy__input-handle-bg:before,
        .candy__input-handle-circle,
        .candy__input-handle-shadow {
            border-radius: 50%;
            top: 0;
        }

        .candy__input-handle-bg,
        .candy__input-handle-shadow {
            left: var(--percent);
            margin-left: -0.375em;
            width: 1.5em;
            height: 1.5em;
            z-index: 2;
        }

        .candy__input-handle-bg,
        .candy__input-handle-bg:before {
            transition: transform 0.3s ease-in-out;
        }

        .candy__input-handle-bg {
            background-color: var(--red);
            overflow: hidden;
        }

        .candy__input-handle-bg:before {
            box-shadow: 0 0 0.1em 0.1em hsla(0, 0%, 0%, 1) inset, 0 0.1em 0.05em 0.1em hsla(0, 0%, 100%, 1) inset;
            opacity: 0.4;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .candy__input-handle-circle {
            box-shadow: -0.375em 0.1em 0 inset;
            color: var(--white);
            top: auto;
            bottom: 50%;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: 50% 100%;
        }

        .candy__input-handle-circle:nth-child(2) {
            transform: rotate(60deg);
        }

        .candy__input-handle-circle:nth-child(3) {
            transform: rotate(120deg);
        }

        .candy__input-handle-circle:nth-child(4) {
            transform: rotate(180deg);
        }

        .candy__input-handle-circle:nth-child(5) {
            transform: rotate(240deg);
        }

        .candy__input-handle-circle:nth-child(6) {
            transform: rotate(300deg);
        }

        .candy__input-handle-shadow {
            box-shadow: 0 0.25em 0.25em hsla(0, 0%, 0%, 0.3);
        }

        .candy__sr {
            clip: rect(1px, 1px, 1px, 1px);
            overflow: hidden;
            position: absolute;
            width: 1px;
            height: 1px;
        }

        /* focus/hover state */
        .candy__input:focus~.candy__input-handle-bg,
        .candy__input:hover~.candy__input-handle-bg {
            transform: rotate(0.25turn);
        }

        .candy__input:focus~.candy__input-handle-bg:before,
        .candy__input:hover~.candy__input-handle-bg:before {
            transform: rotate(-0.25turn);
        }

        /* `:focus-visible` support */
        @supports selector(:focus-visible) {

            .candy__input:focus~.candy__input-handle-bg,
            .candy__input:focus~.candy__input-handle-bg:before {
                transform: rotate(0);
            }

            .candy__input:focus-visible~.candy__input-handle-bg,
            .candy__input:hover~.candy__input-handle-bg {
                transform: rotate(0.25turn);
            }

            .candy__input:focus-visible~.candy__input-handle-bg:before,
            .candy__input:hover~.candy__input-handle-bg:before {
                transform: rotate(-0.25turn);
            }
        }
    </style>
</head>

<body>
    <form action="">
        <div class="candy">
            <label for="peppermint" class="candy__sr">Range</label>
            <input id="peppermint" class="candy__input" type="range" value="50" min="0" max="100">
            <span class="candy__input-fill"></span>
            <span class="candy__input-handle-shadow"></span>
            <span class="candy__input-handle-bg">
                <span class="candy__input-handle-circle"></span>
                <span class="candy__input-handle-circle"></span>
                <span class="candy__input-handle-circle"></span>
                <span class="candy__input-handle-circle"></span>
                <span class="candy__input-handle-circle"></span>
                <span class="candy__input-handle-circle"></span>
            </span>
        </div>
    </form>
</body>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        const candy = new CandyRangeSlider("#peppermint");
    });

    class CandyRangeSlider {
        constructor(el) {
            this.input = document.querySelector(el);
            this.init();
        }
        init() {
            this.input?.addEventListener("input", this.update.bind(this));
            this.update();
        }
        update(e) {
            let value = this.input.defaultValue;
            if (e) value = e.target?.value;
            else this.input.value = value;
            const min = +this.input.min || 0;
            const max = +this.input.max || 100;
            const percentRaw = (value - min) / (max - min) * 100;
            const percent = +percentRaw.toFixed(2);
            const handleRaw = 1.5 * (1 - percent / 100) - 1.125;
            const handle = +handleRaw.toFixed(4);
            const percentStyle = `calc(${percent}% + ${handle}em)`;

            this.input.parentElement?.style.setProperty("--percent", percentStyle);
        }
    }
</script>

</html>